<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Multicolor animation drop down navigation menu with jQuery</title>

<link href="webwidget_menu_dropdown.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="webwidget_menu_dropdown.js"></script>

<style type="text/css">
h2{
	color: red;
}
pre{
	padding: 4px;
	border: #F90 dotted 1px;
}
</style>

</head>
<body>

        <script language="javascript" type="text/javascript">
            $(function() {
                $("#webwidget_menu_dropdown").webwidget_menu_dropdown({
                    m_w: '100',
                    m_t_c: '#FFF',
                    m_c_c: '#8FC45A',
                    m_bg_c: '#56A901',
                    m_b_s: '2',
                    m_bg_h_c: '#8FC45A',
                    s_s: 'fast',
		m_s: 'small'
                });
				$("#webwidget_menu_dropdown1").webwidget_menu_dropdown({
                    m_w: '100',
                    m_t_c: '#CCC',
                    m_c_c: '#666',
                    m_bg_c: '#000',
                    m_b_s: '2',
                    m_bg_h_c: '#666',
                    s_s: 'fast',
		m_s: 'medium'
                });
            });
			
        </script>
    <h1>Multicolor animation drop down navigation menu with jQuery</h1>
<h2>Demo1</h2>
<div id="webwidget_menu_dropdown" class="webwidget_menu_dropdown">
            <ul>
                <li class="current"><a href="link1">Menu1</a>
                    <ul>
                        <li><a href="link1">submenu1</a>
                        </li>
                        <li><a href="link2">submenu2</a></li>
                        <li><a href="link3">submenu3</a></li>
                        <li><a href="link4">submenu4</a></li>
                        <li><a href="link5">submenu5</a></li>
                        <li><a href="link6">submenu6</a></li>
                    </ul>
                </li>
                <li><a href="link2">Menu2</a>
                    <ul>
                        <li><a href="link1">submenu1</a>
                        </li>
                        <li><a href="link2">submenu2</a></li>
                        <li><a href="link3">submenu3</a></li>
                        <li><a href="link4">submenu4</a></li>
                        <li><a href="link5">submenu5</a></li>
                        <li><a href="link6">submenu6</a></li>
                    </ul>
                </li>
                <li><a href="link3">Menu3</a>
                <ul>
                        <li><a href="link1">submenu1</a>
                        </li>
                        <li><a href="link2">submenu2</a></li>
                        <li><a href="link3">submenu3</a></li>
                        <li><a href="link4">submenu4</a></li>
                        <li><a href="link5">submenu5</a></li>
                        <li><a href="link6">submenu6</a></li>
                  </ul></li>
                <li><a href="link4">Menu4</a>
                <ul>
                        <li><a href="link1">submenu1</a>
                        </li>
                        <li><a href="link2">submenu2</a></li>
                        <li><a href="link3">submenu3</a></li>
                        <li><a href="link4">submenu4</a></li>
                        <li><a href="link5">submenu5</a></li>
                        <li><a href="link6">submenu6</a></li>
                  </ul></li>
                <li><a href="link5">Menu5</a>
                <ul>
                        <li><a href="link1">submenu1</a>
                        </li>
                        <li><a href="link2">submenu2</a></li>
                        <li><a href="link3">submenu3</a></li>
                        <li><a href="link4">submenu4</a></li>
                        <li><a href="link5">submenu5</a></li>
                        <li><a href="link6">submenu6</a></li>
                  </ul></li>
                <li><a href="link6">Menu6</a>
                    <ul>
                            <li><a href="link1">submenu1</a>
                            </li>
                            <li><a href="link2">submenu2</a></li>
                            <li><a href="link3">submenu3</a></li>
                            <li><a href="link4">submenu4</a></li>
                            <li><a href="link5">submenu5</a></li>
                            <li><a href="link6">submenu6</a></li>
                    </ul>
                </li>
            </ul>
            <div style="clear: both"></div>
</div>
        <h2>Demo2</h2>
        <div id="webwidget_menu_dropdown1" class="webwidget_menu_dropdown">
            <ul>
                <li class="current"><a href="link1">Menu1</a>
                    <ul>
                        <li><a href="link1">submenu1</a>
                        </li>

                        <li><a href="link2">submenu2</a></li>

                        <li><a href="link3">submenu3</a></li>
                        <li><a href="link4">submenu4</a></li>
                        <li><a href="link5">submenu5</a></li>
                        <li><a href="link6">submenu6</a></li>
                    </ul>

                </li>
                <li><a href="link2">Menu2</a>

                    <ul>
                        <li><a href="link1">submenu1</a>
                        </li>
                        <li><a href="link2">submenu2</a></li>
                        <li><a href="link3">submenu3</a></li>

                        <li><a href="link4">submenu4</a></li>
                        <li><a href="link5">submenu5</a></li>

                        <li><a href="link6">submenu6</a></li>
                    </ul>
                </li>
                <li><a href="link3">Menu3</a>

                <ul>
                        <li><a href="link1">submenu1</a>
                        </li>

                        <li><a href="link2">submenu2</a></li>
                        <li><a href="link3">submenu3</a></li>
                        <li><a href="link4">submenu4</a></li>

                        <li><a href="link5">submenu5</a></li>
                        <li><a href="link6">submenu6</a></li>
                  </ul></li>

                <li><a href="link4">Menu4</a>
                <ul>
                        <li><a href="link1">submenu1</a>

                        </li>
                        <li><a href="link2">submenu2</a></li>
                        <li><a href="link3">submenu3</a></li>
                        <li><a href="link4">submenu4</a></li>

                        <li><a href="link5">submenu5</a></li>
                        <li><a href="link6">submenu6</a></li>

                  </ul></li>

            </ul>
            <div style="clear: both"></div>
        </div>    
        <h2>Usage</h2>
    <h3>Add js and css files</h3>
        <pre>
&lt;link href=&quot;css/webwidget_menu_dropdown.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;&lt;/link&gt;<br />&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.3.2.min.js&quot;&gt;&lt;/script&gt;<br />&lt;script type=&quot;text/javascript&quot; src=&quot;js/webwidget_menu_dropdown.js&quot;&gt;&lt;/script&gt;</pre>
    <h3>Add html</h3>
        <pre>
        &lt;div class=&quot;webwidget_menu_dropdown&quot;&gt;<br />            &lt;ul&gt;<br />                &lt;li class=&quot;current&quot;&gt;&lt;a href=&quot;link1&quot;&gt;Menu1&lt;/a&gt;<br />                    &lt;ul&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link1&quot;&gt;submenu1&lt;/a&gt;<br />                        &lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link2&quot;&gt;submenu2&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link3&quot;&gt;submenu3&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link4&quot;&gt;submenu4&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link5&quot;&gt;submenu5&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link6&quot;&gt;submenu6&lt;/a&gt;&lt;/li&gt;<br />                    &lt;/ul&gt;<br />                &lt;/li&gt;<br />                &lt;li&gt;&lt;a href=&quot;link2&quot;&gt;Menu2&lt;/a&gt;<br />                    &lt;ul&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link1&quot;&gt;submenu1&lt;/a&gt;<br />                        &lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link2&quot;&gt;submenu2&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link3&quot;&gt;submenu3&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link4&quot;&gt;submenu4&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link5&quot;&gt;submenu5&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link6&quot;&gt;submenu6&lt;/a&gt;&lt;/li&gt;<br />                    &lt;/ul&gt;<br />                &lt;/li&gt;<br />                &lt;li&gt;&lt;a href=&quot;link3&quot;&gt;Menu3&lt;/a&gt;<br />                &lt;ul&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link1&quot;&gt;submenu1&lt;/a&gt;<br />                        &lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link2&quot;&gt;submenu2&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link3&quot;&gt;submenu3&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link4&quot;&gt;submenu4&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link5&quot;&gt;submenu5&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link6&quot;&gt;submenu6&lt;/a&gt;&lt;/li&gt;<br />                    &lt;/ul&gt;&lt;/li&gt;<br />                &lt;li&gt;&lt;a href=&quot;link4&quot;&gt;Menu4&lt;/a&gt;<br />                &lt;ul&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link1&quot;&gt;submenu1&lt;/a&gt;<br />                        &lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link2&quot;&gt;submenu2&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link3&quot;&gt;submenu3&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link4&quot;&gt;submenu4&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link5&quot;&gt;submenu5&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link6&quot;&gt;submenu6&lt;/a&gt;&lt;/li&gt;<br />                    &lt;/ul&gt;&lt;/li&gt;<br />                &lt;li&gt;&lt;a href=&quot;link5&quot;&gt;Menu5&lt;/a&gt;<br />                &lt;ul&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link1&quot;&gt;submenu1&lt;/a&gt;<br />                        &lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link2&quot;&gt;submenu2&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link3&quot;&gt;submenu3&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link4&quot;&gt;submenu4&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link5&quot;&gt;submenu5&lt;/a&gt;&lt;/li&gt;<br />                        &lt;li&gt;&lt;a href=&quot;link6&quot;&gt;submenu6&lt;/a&gt;&lt;/li&gt;<br />                    &lt;/ul&gt;&lt;/li&gt;<br />                &lt;li&gt;&lt;a href=&quot;link6&quot;&gt;Menu6&lt;/a&gt;<br />                    &lt;ul&gt;<br />                            &lt;li&gt;&lt;a href=&quot;link1&quot;&gt;submenu1&lt;/a&gt;<br />                            &lt;/li&gt;<br />                            &lt;li&gt;&lt;a href=&quot;link2&quot;&gt;submenu2&lt;/a&gt;&lt;/li&gt;<br />                            &lt;li&gt;&lt;a href=&quot;link3&quot;&gt;submenu3&lt;/a&gt;&lt;/li&gt;<br />                            &lt;li&gt;&lt;a href=&quot;link4&quot;&gt;submenu4&lt;/a&gt;&lt;/li&gt;<br />                            &lt;li&gt;&lt;a href=&quot;link5&quot;&gt;submenu5&lt;/a&gt;&lt;/li&gt;<br />                            &lt;li&gt;&lt;a href=&quot;link6&quot;&gt;submenu6&lt;/a&gt;&lt;/li&gt;<br />                    &lt;/ul&gt;<br />                &lt;/li&gt;<br />            &lt;/ul&gt;<br />            &lt;div style=&quot;clear: both&quot;&gt;&lt;/div&gt;<br />        &lt;/div&gt;
        </pre>
<h3>Add startup script.</h3>
<pre>
$(function(){<br />     $(&quot;#webwidget_menu_dropdown&quot;).webwidget_menu_dropdown({<br />           m_w: '100',   //Menu width<br />           m_t_c: '#FFF',  //Text color<br />           m_c_c: '#8FC45A',  //Current background color<br />           m_bg_c: '#56A901',  //background color<br />           m_b_s: '2',  //Menu margin<br />           m_bg_h_c: '#8FC45A', //Mouse hover color<br />           s_s: 'fast',  //Animation speed: slow  normal  fast  no-wait<br />           m_s: 'small'  //Menu size:large  medium  small<br />     });<br /> });</pre>
<pre>
Copyright 2010 <a href="http://www.htmldrive.net">htmldrive.net</a> Inc.

@projectHomepage: <a href="http://www.htmldrive.net/items/preview/18/Multicolor-animation-drop-down-navigation-menu-with-jQuery.html">http://www.htmldrive.net/items/preview/18/Multicolor-animation-drop-down-navigation-menu-with-jQuery.html</a>

@projectDescription: Multicolor animation drop down navigation menu with jQuery.

@author: <a href="http://www.htmldrive.net">htmldrive.net</a>

More script and css style : <a href="http://www.htmldrive.net">htmldrive.net</a>

@version 1.0

@license http://www.apache.org/licenses/LICENSE-2.0
        </pre>
</body>
</html>
